<template>
  <div class="wedding-banquet">
    <!-- 灰色导航栏 -->
    <div class="middle_1">
      <ul>
        <li><router-link to="/wedding">婚宴</router-link></li>
        <li>
          <div class="middle_2"></div>
        </li>
        <li><router-link to="/wedding">场地</router-link></li>
        <li><router-link to="/wedding">套餐</router-link></li>
        <li><router-link to="/wedding">策划</router-link></li>
        <li><router-link to="/wedding">浓情蜜月</router-link></li>
        <li><router-link to="/wedding">联系我们</router-link></li>
      </ul>
    </div>
    <!-- 婚宴图片 -->
    <div class="middle_3">
      <img src="/img/wedding/BEJ_234_original.jpg" alt="" />
      <div class="middle_4">
        <span>北京四季酒店</span>
        <p>婚宴</p>
        <div class="middle_5"></div>
      </div>
    </div>
    <!-- 中部文字段落与黑色条框 -->
    <div class="middle_6">
      <div class="middle_7">
        <p>
          在繁华朝阳区各使馆与跨国公司总部上方的静逸奢居,开启您的甜蜜新婚生活。北京四季酒店在首都的繁华地段闹中取静,诚邀您在此与亲朋好友共贺爱情,或者单纯地享受幸福的二人世界,无论您的庆祝方式为何我们都会为您呈现一场如梦似幻的婚礼。
        </p>
      </div>
      <div class="middle_8">
        <div class="middle_9">
          <span>我们经验丰富的团队可帮助您规划梦寐以求的活动。</span>
          <div>
            <router-link to="/wedding">+86 10 5695 8888</router-link>
          </div>
        </div>
        <div class="middle_10">
          <router-link to="/wedding">联系我们</router-link>
        </div>
      </div>
    </div>
    <!-- 中部婚礼策划图片 -->
    <div class="footer_1">
      <img src="/img/wedding/BEJ_227_original.jpg" alt="" />
      <div class="footer_2">
        <router-link to="/wedding">婚礼策划</router-link>
      </div>
    </div>
    <div class="footer_3">
      <div class="footer_3_1">
        <span>别具匠心的婚礼体验</span>
      </div>
      <div class="footer_3_2"></div>
      <div class="footer_4">
        <p>
          在水疗中心享受焕发活力的护理，然后回到俯瞰朝阳区繁华美景的套房与姐妹团来一场婚前派对。吉时一到，在气派非凡的宴会厅中盛装亮相，沿着洒满玫瑰花瓣的通道，走向您的心中挚爱，大声说出“我愿意”，共同奔赴幸福。然后携手倒满象征美满爱情的香槟塔，并与来宾分享甜蜜的多层婚礼蛋糕。这是您的大喜之日，而我们的任务就是满足您的一切愿望。
        </p>
      </div>
      <div class="footer_4_1"></div>
      <div class="footer_5">
        <div class="footer_6">
          <span>联系婚礼专家</span>
          <div>
            <router-link to="/wedding">+86 10 5695 8888</router-link>
          </div>
        </div>
        <div class="footer_7">
          <router-link to="/wedding">联系我们</router-link>
        </div>
      </div>
    </div>
    <!-- 底部图片与按钮分栏 -->
    <div class="footer_8">
      <div class="footer_9">
        <img src="/img/wedding/BEJ_200_original.jpg" alt="" />
      </div>
      <div class="footer_10">
        <span>灵活多变的场地空间</span>
        <div class="footer_10_1"></div>
        <p>
          风格现代的迎宾区可用作新娘送礼会的场地，在温馨氛围中收获满满的感动与祝福，而气派非凡的宴会厅则可用于在稍后举办大型迎宾酒会和婚宴，让您的大喜之日圆满无憾。
        </p>
        <div class="footer_10_2">
          <router-link to="/wedding">详情</router-link>
        </div>
      </div>
    </div>
    <div class="footer_11">
      <div class="footer_12">
        <span>婚礼策划团队</span>
        <div class="footer_12_1"></div>
        <p>
          从设计请柬、定制结婚蛋糕，到花艺装饰、搜购令人难忘的伴手礼，我们的婚礼专家将妥帖为您打理好每一个细节，让您的大喜之日如心所愿，甚至还会收获更多惊喜。
        </p>
        <div class="footer_12_2">
          <router-link to="/wedding">详情</router-link>
        </div>
      </div>
      <div class="footer_13">
        <img src="/img/wedding/BEJ_206_original.jpg" alt="" />
      </div>
    </div>
    <div class="footer_8">
      <div class="footer_9">
        <img src="/img/wedding/BEJ_221_original.jpg" alt="" />
      </div>
      <div class="footer_10">
        <span>婚宴套餐</span>
        <div class="footer_10_1"></div>
        <p>
          再小的细节都很重要。秉持这样的理念，才有了我们无微不至的服务。我们精心设计的婚宴套餐以中国传统为特色，并且完全可以根据您的构想悉心定制。
        </p>
        <div class="footer_10_2">
          <router-link to="/wedding">详情</router-link>
        </div>
      </div>
    </div>
    <div class="footer_14">
      <div class="footer_12">
        <span>北京浓情蜜月</span>
        <div class="footer_12_1"></div>
        <p>
          在中国首都畅享甜蜜的新婚时光。您可以前往水疗中心享受双人理疗，放松身心，或共游朝阳公园，抑或在繁华的商业区探店，还可以乘坐私人直升机飞越慕田峪长城，在高空为人生新篇章干杯。
        </p>
        <div class="footer_12_2">
          <router-link to="/wedding">详情</router-link>
        </div>
      </div>
      <div class="footer_13">
        <img src="/img/wedding/HAN_729_original.jpg" alt="" />
      </div>
    </div>
  </div>
</template>
<style scoped>
  .middle_1{
    width: 100%;
    height: 55px;
    background-color: lightgrey;
  }
  .middle_2{
    width: 0px;
    height: 30px;
    border: 1px solid gray;
    margin-top: 12px;
  }
  .middle_3{
    width: 100%;
    height: 550px;
    overflow: hidden;
    position: relative;
    text-align: center;
  }
  .middle_3 img{
    width: 100%;
  }
  .middle_4{
    width: 250px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,10%);
  }
  .middle_4 span{
    font-size: 1.1rem;
    color: #fff;
    font-style: italic;
    font-weight: 500;
  }
  .middle_4 p{
    color: #fff;
    font-size: 4.5rem;
    letter-spacing: 15px;
    margin-left: 15px;
    margin-top: 30px;
  }
  .middle_5{
    width: 45px;
    height: 0px;
    border-top: 2px solid #fff;
    margin: auto;
    margin-top: 25px;
  }
  .middle_1 ul{
    list-style: none;
  }
  .middle_1 ul>li{
    float: left;
    line-height: 55px;
    margin-right: 30px;
    font-size: 0.5rem;
    letter-spacing: 2px;
    font-weight: bold;
  }
  .middle_1 ul>li>a{
    color: #333;
  }
  .middle_1 ul>li>a:hover{
    color: black;
    text-decoration: underline;
    transition: 0.4s;
  }
  .middle_1 ul>li:first-child{
    margin-left: 180px;
  }
  .middle_6{
    width: 100%;
    height: 400px;
  }
  .middle_7{
    width:40%;
    font-weight: 600;
    line-height: 35px;
    margin: auto;
    letter-spacing: 2px;
    margin-top: 100px;
    clear: both;
  }
  .middle_7 p{
    font-size: 1.4rem;
  }
  .middle_8{
    width: 65%;
    height: 80px;
    background-color: black;
    margin: auto;
    position: relative;
    margin-top: 100px;
  }
  .middle_9{
    width: 75%;
    height: 100%;
    line-height: 80px;
    margin-left: 70px;
  }
  .middle_9 span{
    color: #fff;
    font-style: italic;
    font-size: 1.1rem;
  }
  .middle_9>div{
    position: absolute;
    top: 0px;
    right: 200px;
  }
  .middle_9>div>a{
    text-decoration: underline;
    color:#fff;
    font-size: 0.9rem;
    font-weight: bold;
    letter-spacing: 1px;
  }
  .middle_9>div>a:hover{
    color: gray;
    transition: 0.4s;
  }
  .middle_10{
    width: 130px;
    height: 30px;
    background-color: #fff;
    position: absolute;
    right: 35px;
    bottom: 25px;
    text-align: center;
    border-radius: 1px;
    border: 1px solid #fff;
  }
  .middle_10:hover{
    background-color: black;
    transition: 0.4s;
  }
  .middle_10 a:hover{
    color: #fff;
    transition: 0.4s;
  }
  .middle_10 a{
    display: block;
    width: 130px;
    height: 30px;
    color: black;
    line-height: 30px;
    font-size: 0.7rem;
    letter-spacing: 3px;
    font-weight: bold;
  }
  .footer_1{
    width: 100%;
    height: 930px;
    overflow: hidden;
    position: relative;
  }
  .footer_1 img{
    width: 100%;
  }
  .footer_2{
    position: absolute;
    left:40px;
    bottom: 30px;
    border-bottom:2px solid #fff;
    padding-bottom: 5px;
  }
  .footer_2 a{
    color: #fff;
    font-size: 0.8rem;
    letter-spacing: 3px;
    font-weight:bold  
  }
  .footer_2 a:hover{
    color:gray;
    transition: 0.4s;
  }
  .footer_3{
    width: 100%;
    height: 40%;
  }
  .footer_3_1{
    width: 267px;
    margin: auto;
    margin-top: 100px;
  }
  .footer_3_1 span{
    font-size: 1.6rem;
    letter-spacing: 4px;
    font-weight: 200;
  }
  .footer_3_2{
    width: 45px;
    height: 1px;
    border-top:2px solid black;
    margin: auto;
    margin-top: 15px;
  }
  .footer_4{
    width:42%;
    font-weight: 600;
    line-height: 35px;
    margin: auto;
    letter-spacing: 2px;
    margin-top: 15px;
  }
  .footer_4 p{
    font-size: 1.4rem;
    font-weight: 500;
  }
  .footer_4_1{
    height: 250px;
  }
  .footer_5{
    width: 65%;
    height: 80px;
    background-color: black;
    margin: auto;
    position: relative;
  }
  .footer_6{
    width: 75%;
    height: 100%;
    line-height: 80px;
    margin-left: 70px;
  }
  .footer_6 span{
    color: #fff;
    font-style: italic;
    font-size: 1.1rem;
  }
  .footer_6>div{
    position: absolute;
    top: 0px;
    right: 200px;
  }
  .footer_6>div>a{
    text-decoration: underline;
    color:#fff;
    font-size: 0.9rem;
    font-weight: bold;
    letter-spacing: 1px;
  }
  .footer_6>div>a:hover{
    color: gray;
    transition: 0.4s;
  }
  .footer_7{
    width: 130px;
    height: 30px;
    background-color: #fff;
    position: absolute;
    right: 35px;
    bottom: 25px;
    text-align: center;
    border-radius: 1px;
    border: 1px solid #fff;
  }
  .footer_7:hover{
    background-color: black;
    transition: 0.4s;
  }
  .footer_7 a:hover{
    color: #fff;
    transition: 0.4s;
  }
  .footer_7 a{
    display: block;
    width: 130px;
    height: 30px;
    color: black;
    line-height: 30px;
    font-size: 0.7rem;
    letter-spacing: 3px;
    font-weight: bold;
  }
  .footer_8{
    width: 80%;
    margin-top: 140px;
    margin-left: 200px;
    display: flex;
    justify-content: space-between;
  }
  .footer_9{
    width: 50%;
    float: left;
  }
  .footer_9 img{
    width: 100%;
  }
  .footer_10{
    width: 40%;
    float: right;
    text-align: left;
  }
  .footer_10 span{
     font-size: 1.1rem;
     font-weight: bolder;
     letter-spacing: 5px;
  }
  .footer_10_1{
     width: 40px;
     height: 1px;
     border-top: 3px solid black;
     margin-top: 30px;
     margin-bottom: 40px;
  }
  .footer_10 p{
     font-size: 1.2rem;
     font-weight: 500;
     letter-spacing: 1px;
     line-height: 30px;
  }
  .footer_10_2{
     width: 200px;
     height: 40px;
     border: 1px solid black;
     text-align: center;
     margin-top: 50px;
  }
  .footer_10_2:hover{
     background-color: black;
     transition: 0.4s;
  }
  .footer_10_2 a{
     display: block;
     width: 100%;
     height: 100%;
     text-decoration: none;
     color: black;
     line-height: 40px;
     font-size: 0.6rem;
     font-weight: bolder;
     letter-spacing: 2px;
  }
  .footer_10_2 a:hover{
     color: #fff;
     transition: 0.4s;
  }
  .footer_11{
    width: 80%;
    margin-top: 140px;
    margin-left: 200px;
    display: flex;
    justify-content: space-between;
  }
 .footer_13{
    width: 50%;
    float: left;
  }
  .footer_13 img{
    width: 100%;
  }
  .footer_12{
    width: 40%;
    float: right;
    text-align: right;
  }
  .footer_12 span{
     font-size: 1.1rem;
     font-weight: bolder;
     letter-spacing: 5px;
  }
  .footer_12_1{
     width: 40px;
     height: 1px;
     border-top: 3px solid black;
     margin-top: 30px;
     margin-bottom: 40px;
     margin-left: 92%;
  }
  .footer_12 p{
     font-size: 1.2rem;
     font-weight: 500;
     letter-spacing: 1px;
     line-height: 30px;
  }
  .footer_12_2{
     width: 200px;
     height: 40px;
     border: 1px solid black;
     text-align: center;
     margin-top: 50px;
     margin-right: 10px;
     float: right;
  }
  .footer_12_2:hover{
     background-color: black;
     transition: 0.4s;
  }
  .footer_12_2 a{
     display: block;
     width: 100%;
     height: 100%;
     text-decoration: none;
     color: black;
     line-height: 40px;
     font-size: 0.6rem;
     font-weight: bolder;
     letter-spacing: 2px;
  }
  .footer_12_2 a:hover{
     color: #fff;
     transition: 0.4s;
  }
  .footer_14{
     width: 80%;
     margin: 140px 0px 150px 200px;
     display: flex;
     justify-content: space-between;
  }
</style>
